<isData class="is-data-wrapper" [noDataIf]="streams.length === 0">
  <div
    *ngIf="isReady"
    style="height: calc(100% - 4rem); min-height: 200px; width: 100%"
  >
    <div
      *ngFor="let item of streams; let odd = odd; let idx = index"
      class="table-row-wrapper"
      (click)="rowClick({ row: item })"
    >
      <div class="table-row" style="background: transparent">
        <mat-checkbox
          color="primary"
          [(ngModel)]="item.__selected"
          (click)="$event.stopPropagation()"

        ></mat-checkbox>
      </div>
      <div *ngFor="let col of getKeys(item); let idx = index" class="table-row">
        <!-- [style.flex]="false && idx === 3 ? 3 : 1" -->
        <h3>{{ col }}:</h3>
        <span style="float: right">{{ item[col] }}</span>
      </div>
    </div>
  </div>

  <ng-container *ngFor="let rec of players; let idx = index">
    <stream-detail
      [data]="{ streams: streams }"
      [rec]="rec"
      (close)="onClosePlayer(idx)"
    ></stream-detail>
  </ng-container>
  <!-- </as-split-area> -->
  <!-- <as-split-area [size]="80">
      <div style="
        display: flex;
        margin-bottom: 3rem;
        flex-direction: column;
      ">
        <ng-container *ngFor="let rec of players; let idx = index">
          <mat-card
            class="player-card"
            [ngStyle]="
              (rec.hide && {
                flex: '0',
                width: '0',
                margin: '0',
                padding: '0',
                opacity: '0',
                'border-width': '0',
                overflow: 'hidden'
              }) ||
              {}
            "
            (click)="setRecActive(rec); recordTable.setSelected(idx)"
            [class.active]="rec.isActive"
          >
            <div class="player-card-data">
              <div>
                CurrentTime:
                {{ rec.player?.getCurrentTime() || 0 | number : "1.3-3" }}s
              </div>
              <div>Duration: {{ rec.player?.getDuration() || 0 }}</div>
              <div>PlaybackRate: {{ rec.player?.getPlaybackRate() || 0 }}</div>
              <a [href]="rec.mp3" download="rec.mp3" style="float: right;">
                <button mat-icon-button><mat-icon>download</mat-icon></button>
              </a>
              <button mat-icon-button class="btn-close" (click)="closeRec(rec)">
                <mat-icon>close</mat-icon>
              </button>
            </div>
            <div
              [id]="rec.id"
              *ngIf="!rec.noData"
              style="cursor: ew-resize"
              (wheel)="onZoomAudio($event, rec.player)"
            ></div>
            <div *ngIf="rec.noData">
              <h2>Audio file is empty (size : 0b)</h2>
            </div>
            <div class="player-controls" *ngIf="!rec.noData">
              <button
                mat-mini-fab
                color="primary"
                (click)="seekAndCenter(rec.player, -0.05)"
                aria-label="rewind"
              >
                <mat-icon>fast_rewind</mat-icon>
              </button>

              <button
                mat-fab
                color="primary"
                aria-label="play/stop"
                (click)="rec.player.playPause()"
              >
                <mat-icon *ngIf="!rec.player?.isPlaying()">play_arrow</mat-icon>
                <mat-icon *ngIf="rec.player?.isPlaying()">pause</mat-icon>
              </button>

              <button
                mat-mini-fab
                color="primary"
                (click)="seekAndCenter(rec.player, 0.05)"
                aria-label="forward"
              >
                <mat-icon>fast_forward</mat-icon>
              </button>
            </div>
          </mat-card>
        </ng-container>
      </div>
      <mat-card *ngIf="selectedColumns?.length">
        <cdk-virtual-scroll-viewport
          [itemSize]="18"
          style="height: 200px; width: 100%"
        >
          <div
            *cdkVirtualFor="let item of selectedStreams"
            style="display: flex"
          >
            <div
              *ngFor="let col of selectedColumns"
              style="flex: 1; height: 18px"
            >
              {{ col }}:{{ item[col] }}
            </div>
          </div>
        </cdk-virtual-scroll-viewport>
      </mat-card>
    </as-split-area>
  </as-split> -->
  <ul *ngIf="!isReady" style="position: absolute">
    <li *ngFor="let item of progressMessage">
      {{ item }}
    </li>
  </ul>
</isData>
